<template>
  <div class="app-container">
    <!-- <a-row :gutter="24"> -->
    <a-card
      title="申请注销账号"
      :bordered="false"
      class="box-card"
      headStyle="text-align: center;font-weight: bold;font-size: 20px;"
    >
      <a-form
        layout="horizontal"
        :model="formState"
        ref="formRef"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item label="开发者类型" name="developerType">
          <a-radio-group v-model:value="formState.developerType">
            <a-radio value="1">个人</a-radio>
            <a-radio value="2">企业</a-radio>
          </a-radio-group>
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item label="选择类型" name="logoutType">
          <a-select
            v-model:value="formState.logoutType"
            placeholder="请选择类型"
            class="margin24"
            style="width: 200px"
            show-search
            :options="options"
            allowClear
          />
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="12"> -->
        <a-form-item label="认证信息" name="icons">
          <a-upload
            v-model:fileList="formState.icons"
            list-type="picture-card"
            :max-count="1"
            :before-upload="beforeUpload"
          >
            <div v-if="formState.icons.length < 1">
              <PlusOutlined
                :style="{
                  fontSize: '32px',
                  color: 'rgba(222, 222, 222, 1)',
                }"
              />
              <div class="margintop18">点击或拖拽上传</div>
            </div>
          </a-upload>
          <i class="fr"
            >① 请您上传1张300×300像素，200KB以内的PNG格式直角图标。<br />②
            上传成功后平台将对图片进行统一规范化处理。</i
          >
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item label="原因描述" name="description">
          <a-textarea
            v-model:value="formState.description"
            allow-clear
            :maxlength="500"
            placeholder="请输入60~500字以内的游戏简介，让用户更了解游戏"
            style="width: 500px"
            show-count
          />
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item label="注销时间" required name="logoutTime">
          <a-date-picker
            v-model:value="formState.logoutTime"
            show-time
            type="date"
            placeholder="Pick a date"
          />
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item label="应用是否转入新账号" name="newAccount">
          <a-radio-group v-model:value="formState.newAccount">
            <a-radio :value="1">是 </a-radio>
            <a-input
              v-if="formState.newAccount === 1"
              v-model:value="formState.inputNewAccount"
              allow-clear
              placeholder="请输入新账号"
              style="width: 200px; margin-right: 12px"
            />
            <a-radio :value="2">否 </a-radio>
          </a-radio-group>
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item label="转入开发者账号" name="resource">
          <a-input
            v-model:value="formState.englishName"
            allow-clear
            placeholder="请输入账号"
            style="width: 200px"
          />
          <div class="upload-instructions" style="margin-top: 8px">
            账号为QQ号码，请勿使用其他账号，否则不予受理
          </div>
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item label="转入UseID账号" name="UseID">
          <a-input
            v-model:value="formState.UseID"
            allow-clear
            placeholder="请输入UseID账号"
            style="width: 200px"
          />
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item
          label="迁移声明"
          :rules="[{ required: true, message: '请上传转入资料证明' }]"
        >
          <!-- action="/upload.do" -->
          <div class="upload-container">
            <a-upload
              v-model:fileList="formState.banner"
              list-type="picture-card"
              :multiple="true"
              :max-count="5"
            >
              <div v-if="formState.banner.length < 5">
                <PlusOutlined
                  :style="{
                    fontSize: '32px',
                    color: 'rgba(222, 222, 222, 1)',
                  }"
                />
                <div class="margintop18">点击或拖拽上传</div>
              </div>
            </a-upload>
            <div class="upload-instructions">
              ① 请上传4~5张，建议尺寸1920X1080px，最小不低于370X180px；<br />②
              支持JPG/PNG格式，单张图片不超过1M。此图片用于应用详情页展示。
            </div>
          </div>
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item label="转入资料证明" name="dataProof">
          <!-- action="/upload.do" -->
          <div class="upload-container">
            <a-upload
              v-model:fileList="formState.dataProof"
              list-type="picture-card"
              :multiple="true"
              :max-count="5"
              :before-upload="beforeUpload1"
            >
              <div v-if="formState.dataProof.length < 5">
                <PlusOutlined
                  :style="{
                    fontSize: '32px',
                    color: 'rgba(222, 222, 222, 1)',
                  }"
                />
                <div class="margintop18">点击或拖拽上传</div>
              </div>
            </a-upload>
            <div class="upload-instructions">
              需上传以下资料：<br />
              ① 上传转入公司营业执照（原件扫描件正/副本加盖印泥章）<br />
              ② 上传转入游戏资质软著<br />
              ③ 上传转入游戏运营版号证书<br />
              ④上传转入游戏授权书（涉及授权需提供授权方营业执照原件扫描件加盖公章及授权合作协议等相关证明）
            </div>
          </div>
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item label="补充材料">
          <!-- action="/upload.do" -->
          <div class="upload-container">
            <a-upload
              v-model:fileList="formState.supplementaryMaterial"
              list-type="picture-card"
              :multiple="true"
              :max-count="5"
            >
              <div v-if="formState.supplementaryMaterial.length < 5">
                <PlusOutlined
                  :style="{
                    fontSize: '32px',
                    color: 'rgba(222, 222, 222, 1)',
                  }"
                />
                <div class="margintop18">点击或拖拽上传</div>
              </div>
            </a-upload>
            <div class="upload-instructions">
              *支持JPG、PNG格式，最多上传5张照片，单张不超过1M的图片
            </div>
          </div>
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="2" :xs="24"> -->
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button
            htmlType="submit"
            style="margin-right: 16px; background-color: rgba(76, 200, 126, 1)"
            type="primary"
            @click="onSave"
            >保存并提交</a-button
          >
          <a-button style="margin-left: 8px" @click="resetForm"
            >取消保存</a-button
          >
        </a-form-item>
        <!-- </a-col> -->
        <div class="form_tips">
          <i class="tips">
            <img src="../../assets/icon/icon.png" alt="" />温馨提示</i
          >
          <br />
          <i
            >①
            注销后，将删除与账号相关数据和应用信息，如需保留应用，可在申请时选择转入新的账号。 </i
          ><br />
          <i
            >②
            注销申请只能在需要注销的账号内进行申请，如果账号或密码遗失，则需要提供营业执照加盖公章/个人身份证正反面复印件加盖拇指印，和注销函发送到官网邮箱进行核实注销。
          </i>
        </div>
      </a-form>
    </a-card>
    <!-- </a-row> -->
  </div>
</template>

<script setup>
import { ref, reactive,
  //  toRaw
  } from 'vue'
  import { message } from 'ant-design-vue';
import {
  PlusOutlined, // SearchOutlined,
  // QuestionCircleOutlined,
  // ExclamationCircleOutlined,
  // PlusOutlined,
  // UploadOutlined,
  // RightOutlined,
  // DeleteOutlined,
  // CheckCircleTwoTone,
} from '@ant-design/icons-vue'
const labelCol = {
  style: {
    width: '180px',
  },
}
const wrapperCol = {
  span: 24,
}

const formRef = ref()
const formState = reactive({
  developerType: '1',
  logoutType: '',
  description: '',
  logoutTime: '',
  newAccount: '',
  inputNewAccount: '',
  englishName: '',
  UseID: '',
  icons: [],
  banner: [],
  dataProof: [],
  supplementaryMaterial: [],
})
const rules = reactive({
  developerType: [
    {
      required: true,
      message: 'Please select type',
      // type: 'array',
      trigger: 'change',
    },
  ],
  // icons: [
  //   { required: true, message: '请上传图片' },
  //   { type: ['jpg', 'jpeg', 'png'], message: '只能上传 JPG/PNG 文件!' },
  //   { maxCount: 3, message: '最多只能上传 3 张图片' },
  // ],
  dataProof: [{ required: true, message: '请上传转入资料证明' }],
  logoutType: [
    {
      required: true,
      message: 'Please select type',
      // type: 'array',
      trigger: 'change',
    },
  ],
  logoutTime: [
    {
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
      type: 'object',
    },
  ],
  name: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'change',
    },
    {
      min: 1,
      max: 20,
      message: 'Length should be 1 to 20',
      trigger: 'blur',
    },
  ],
  age: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  types3: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  states: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  // description: [
  //   {
  //     required: true,
  //     message: 'Please input Activity name',
  //     trigger: 'change',
  //   },
  //   {
  //     min: 5,
  //     max: 15,
  //     message: 'Length should be 5 to 15',
  //     trigger: 'blur',
  //   },
  // ],
  description: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'change',
    },
    {
      min: 60,
      max: 500,
      message: 'Length should be 60 to 500',
      trigger: 'blur',
    },
  ],
})
const beforeUpload = (file) => {
  const isPNG = file.type === 'image/png';
  const isLt200K = file.size / 1024 < 200;
  const is300x300 = file.width === 300 && file.height === 300;

  if (!isPNG) {
    message.error('只能上传PNG格式的图片!');
  }
  if (!isLt200K) {
    message.error('图片大小不能超过200KB!');
  }
  if (!is300x300) {
    message.error('图片尺寸必须是300×300像素!');
  }

  return isPNG && isLt200K && is300x300;
};
const beforeUpload1 = (file) => {
  const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt1M = file.size / 1024 / 1024 < 1;
  const isCorrectSize = file.width >= 370 && file.height >= 180 && file.width <= 1920 && file.height <= 1080;

  if (!isJPGorPNG) {
    message.error('只能上传JPG/PNG格式的图片!');
  }
  if (!isLt1M) {
    message.error('图片大小不能超过1M!');
  }
  if (!isCorrectSize) {
    message.error('图片尺寸必须在370X180px到1920X1080px之间!');
  }

  return isJPGorPNG && isLt1M && isCorrectSize;
};

const options = ref([
  {
    value: '1',
    label: '开发者注销开发者账户',
  },
  {
    value: '2',
    label: 'Lucy',
  },
  {
    value: '3',
    label: 'Tom',
  },
])
const onSave = async () => {
  try {
    await formRef.value.validate()
    console.log('values', formState)
    // 提交逻辑...
  } catch (error) {
    console.error('校验失败', error)
  }
  // formRef.value
  //   .validate()
  //   .then(() => {
  //     console.log('values', formState, toRaw(formState))
  //   })
  //   .catch(e => {
  //     console.log(formState, e, '校验失败-catch--1111')
  //   })
}
const resetForm = () => {
  formRef.value.resetFields()
  formState.banner = []
  formState.icons = []
  formState.englishName = ''
  formState.dataProof = []
  formState.supplementaryMaterial = []
}
</script>

<style lang="less" scoped>
.app-container {
  width: 100%;
  padding: 0 14px;
  background: #ececec;
}

.box-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 2px;
  // border: 1px solid #e6ebf5;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  h1 {
    height: 48px;
    text-align: center;
    font-weight: bolder;
  }
}
.upload-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
:deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper) {
  width: auto;
}
.upload-instructions {
  // flex: 1;
  // margin-left: 20px;
  font-size: 12px;
  color: #888;
}
.fr {
  display: block;
  // float: left;
  margin-top: -40px;
  margin-left: 140px;
  // width: 400px;
  width: 100%;
  height: 40px;
  white-space: pre-wrap;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
  line-height: 20px;
  text-align: left;
}
.frInput {
  // display:flex;
  // float: left;
  // margin-top: -40px;
  // margin-left:140px;
  width: 400px;
  height: 40px;
  white-space: pre-wrap;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
  line-height: 20px;
  text-align: left;
}
.fr1 {
  margin-top: 0px !important;
}
.margin24 {
  margin-right: 24px;
}
.margintop18 {
  margin-top: 18px;
  font-weight: 400;
  font-size: 14px;
  color: #cccccc;
  line-height: 20px;
  text-align: left;
}
.icons {
  width: 80px;
  height: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.footer_content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.form_tips {
  font-size: 12px;
  background: #edfaf1;
  border-radius: 4px 4px 4px 4px;
  margin-bottom: 16px;
  padding: 12px;
  color: #6e6e6e;
  i {
    font-style: normal;
  }
}
.tips {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  color: #3c3c3c;
  font-weight: 400;
  img {
    width: 16px;
    height: 16px;
  }
}
</style>
